<template>
  <div class="home">
    首页
    <!-- 使用element-ui组件库中的 轮播图组件 -->
    <el-carousel height="200px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="https://dummyimage.com/300x200/0ff" alt="">
      </el-carousel-item>
    </el-carousel>

    <!-- 使用我们自己封装的轮播图组件 -->
    <Carousel :list="list"></Carousel>

  </div>
</template>

<script>

import Carousel from '../components/Carousel'
import Axios from 'axios'
export default {
  name: 'home',
  data:function(){
    return {
      list:[]
    }
  },
  components: {
    'Carousel':Carousel
  },
  mounted(){
    Axios.post('/carousel',{count: 10 }).then((res)=>{
      this.list = res.data.list
    })
  }
}
</script>
<style >
.el-carousel img{
  width: 100%;
}
</style>
